***************************************
*          @@  FLEX 3 @@              *                  
*                                     *
*   ------ >> Chapitre 7 << ------    *
*                                     *
***************************************




<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

	<mx:TabNavigator x="10" y="10" width="516" height="400" id="tbn">
	
	    <mx:Canvas label="Onglet 1" width="100%" height="100%" >
	    </mx:Canvas>
	
	    <mx:Canvas label="Onglet 2" width="100%" height="100%">
	    </mx:Canvas>
	
	</mx:TabNavigator>
</mx:Application>
<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	
	<mx:ToggleButtonBar x="10" y="10" width="503" dataProvider="ensembleVues" id="tg_barre">
	</mx:ToggleButtonBar>
	
	<mx:ViewStack x="10" y="38" id="ensembleVues" width="497" height="327">
	    <mx:Canvas label="Vue 1" width="100%" height="100%" id="Vue_1" backgroundColor="#E0BCBC">
	    </mx:Canvas>
	
	    <mx:Canvas label="Vue 2" width="100%" height="100%" id="Vue_2" backgroundColor="#444697">
	    </mx:Canvas>
	
	    <mx:Canvas label="Vue 3" width="100%" height="100%" id="Vue_3" backgroundColor="#A254B5">
	    </mx:Canvas>
	
	</mx:ViewStack>
	
</mx:Application>
	< ! Slection de la vue 2 ayant pour numro dindex 1 -->
<mx:ToggleButtonBar x="10" y="10" width="503" dataProvider="ensembleVues" id="tg_barre" selectedIndex="1">
	</mx:ToggleButtonBar>
<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

	<mx:Accordion x="10" y="10" width="483" height="301" id="acn">
	
	    <mx:Canvas label="Partie A" width="100%" height="100%">
	        <mx:Panel x="115.5" y="10" width="250" height="200" layout="absolute" title="Panel Partie A">
	        </mx:Panel>
	    </mx:Canvas>
	
	    <mx:Canvas label="Partie B" width="100%" height="100%">
	        <mx:Panel x="115.5" y="23" width="250" height="200" layout="absolute" title="Panel Partie B">
	        </mx:Panel>
	    </mx:Canvas>
	
	</mx:Accordion>
		
</mx:Application>
<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Script>
	    <![CDATA[
	        import mx.collections.ArrayCollection;
	         [Bindable]
	        public var etatDossiers:ArrayCollection = new ArrayCollection([
            {Dossier:"Clturs", nombre:1500},
            {Dossier:"Ouverts", nombre:200},
            {Dossier:"En attente", nombre:30},

               ]);
	    ]]>
</mx:Script>

	<mx:PieChart id="graphique"
        dataProvider="{etatDossiers}"
        showDataTips="true"
        width="203" height="140" x="10" y="5">
        <mx:series>
           <mx:PieSeries
	                field="nombre"
	                    nameField="Dossier"
           />
        </mx:series>
	    </mx:PieChart>

</mx:Application>
<mx:Script>
	    <![CDATA[
	        import mx.collections.ArrayCollection;
	        [Bindable]
	        public var etatDossiers:ArrayCollection = new ArrayCollection([
            {Dossier:"Clturs", nombre:1500},
            {Dossier:"Ouverts", nombre:200},
            {Dossier:"En attente", nombre:30},

        ]);


        import mx.charts.HitData

        public function modifierDataTip(e:HitData):String{
            var etiquette:String;
            etiquette= "Nombre de dossiers :"+e.item.nombre;
            return etiquette;
        }
	    ]]>
</mx:Script>


	     <mx:PieChart id="graphique"
        dataProvider="{etatDossiers}"
            showDataTips="true"
                 width="203" height="140" x="10" y="5"
                 dataTipFunction="modifierDataTip">
                 <mx:series>
                    <mx:PieSeries
	                     field="nombre"
	                     nameField="Dossier"
	 
                     />
                </mx:series>
    </mx:PieChart>

</mx:Application>
<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Script>
	    <![CDATA[
	        import mx.collections.ArrayCollection;
	
	        // Tableaux de donnes
	         [Bindable]
	        private var Janvier:ArrayCollection = new ArrayCollection([
            {produit:"P1", vente:500},
            {produit:"P2", vente:700},
            {produit:"P3", vente:2000}]);

	        private var Fevrier:ArrayCollection = new ArrayCollection([
            {produit:"P1", vente:2500},
            {produit:"P2", vente:800},
            {produit:"P3", vente:4000}]);

	        private var Mars:ArrayCollection = new ArrayCollection([
            {produit:"P1", vente:800},
            {produit:"P2", vente:1200},
            {produit:"P3", vente:1500}]);

	    ]]>
</mx:Script>

</mx:Application>
<mx:ColumnChart x="10" y="67" id="histogramme" dataProvider="{Janvier}">
	
	    <mx:horizontalAxis>
         <mx:CategoryAxis id="donneesGraphiques"
            dataProvider="{Janvier}"
            categoryField="produit"
        />
    </mx:horizontalAxis>

	    <mx:series>
        <mx:ColumnSeries
            xField="produit"
            yField="vente"
        />
	    </mx:series>

	</mx:ColumnChart>
	<mx:HSlider
	    id="choixDuMois"
	    x="38"
	    y="23"
	    width="372"
	    minimum="1"
	    maximum="3"
	    tickInterval="1"
	    snapInterval="1"
	    liveDragging="true"
	    labels="[Janvier,Fvrier,Mars]"
	    showDataTip="false"
	    change="afficherGraphique()"
	/>
// Affichage des donnes en fonction du mois slectionn
	// dans le HSlider
	    import mx.controls.Alert;
	    public function afficherGraphique():void
	    {
	
	        switch (choixDuMois.value){

	        case 1 : histogramme.dataProvider = Janvier;
	            break;
	        case 2 : histogramme.dataProvider = Fevrier;
	            break;
	        case 3 : histogramme.dataProvider = Mars;
	            break;

	        }
	
	        // Mise  jour du dataProvider du composant HorizontalAxis
	        donneesGraphiques.dataProvider = histogramme.dataProvider;
	
	    }
